﻿requirejs.config({
    baseUrl: ".",
    paths: {
    	zepto:"javascripts/zepto.min",
    	dingtalk:"javascripts/dingtalk",
        vue: "components/vue/vue.min",
        axios: "components/axios/axios.min",
        common: "resources/js/common"
    }
});

require(["zepto","dingtalk","vue", "axios", "common"], function (zepto,dingtalk,Vue, axios, common) {

    var preHandler = function (e) {
        e.preventDefault();
    }

    var Draw = function (el) {

        var self = this;

        this.width = document.body.clientWidth;
        this.height = document.body.clientWidth;
        this.canvas = document.getElementById(el);
        this.canvas.width = this.width;
        this.canvas.height = this.width;

        this.cxt = this.canvas.getContext("2d");
        this.stage_info = this.canvas.getBoundingClientRect();
        this.path = {
            beginX: 0,
            beginY: 0,
            endX: 0,
            endY: 0
        };

        this.canvas.addEventListener("touchstart", function (event) {
            document.addEventListener('touchstart', preHandler, false);
            self.drawBegin(event);
        });

        this.canvas.addEventListener('touchend', function (event) {
            document.addEventListener('touchend', preHandler, false);

        })

        this.drawBegin = function (e) {
            window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty()
            this.cxt.strokeStyle = "#000000"
            this.cxt.beginPath()
            this.cxt.moveTo(
                e.changedTouches[0].clientX - this.stage_info.left,
                e.changedTouches[0].clientY - this.stage_info.top
            )
            this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left
            this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top
            self.canvas.addEventListener("touchmove", function () {
                self.drawing(event)
            })
        }

        this.drawing = function (e) {
            this.cxt.lineTo(
                (e.changedTouches[0].clientX - this.stage_info.left),
                (e.changedTouches[0].clientY - this.stage_info.top)
            )
            this.path.endX = e.changedTouches[0].clientX - this.stage_info.left
            this.path.endY = e.changedTouches[0].clientY - this.stage_info.top
            this.cxt.stroke()
        }

        this.drawEnd = function () {
            document.removeEventListener('touchstart', preHandler, false);
            document.removeEventListener('touchend', preHandler, false);
            document.removeEventListener('touchmove', preHandler, false);
        }

        this.clear = function () {
            this.cxt.clearRect(0, 0, this.width, this.height);
        }

        this.save = function () {
            return this.canvas.toDataURL("image/png")
        }
    }

    var vm = new Vue({
        el: "#view",
        data: {
            draw: null
        },
        mounted: function () {
            this.draw = new Draw("signature");
        },
        methods: {
            clear: function () {
                this.draw.clear();
            },
            save: function () {
                var data = this.draw.save();
                console.log(data)
            }
        }
    });
});